<script setup lang="ts">
import { addDialog } from "@/components/ReDialog";
import { useColumns } from "./columns";
import { h } from "vue";
import { message } from "@/utils/message";
import { FormProps } from "element-plus";
import form from './from.vue'
const { columns, dataList } = useColumns();
function onFormOneClick() {
  addDialog({
    width: "500px",
    title: "新增分组",
    contentRenderer: () => form,
    props: {
      // 赋默认值
      formInline: {

      }
    },
    closeCallBack: ({ options, args }) => {
      // options.props 是响应式的
      const { formInline } = options.props;
      const text = `新名称是${formInline.type} `;
      if (args?.command === "cancel") {
        // 您点击了取消按钮
        message(`已取消`);
      } else if (args?.command === "sure") {
        message(`${text}`);
      } else {
        message(
          `已取消`
        );
      }
    }
  });
}

</script>

<template>
  <div class="flex">
    <el-card class="w-full">
      <el-button type="primary" class="mb-3" @click="onFormOneClick">新增</el-button>
      <pure-table row-key="id" :data="dataList" :columns="columns" class="w-full" border />
    </el-card>
  </div>
</template>
